<template>
    <div class="mkcard">
        <div class="article" v-if="zhdata.article"><div class="imgbox" v-html="zhdata.article"></div></div>
        <div class="problem" v-if="zhdata.qt"><div class="spaninline">{{ksdata.id}} .</div><div class="imgbox" v-html="zhdata.qt"></div></div>
        <div class="itemlist">
            <u-cell-group>
                <u-cell v-for="(ans,anindex) in ansarr" :key="anindex" clickable value-class="itemlist-i" :data-index="anindex">
                    <div slot="title" v-html="ans.title +'.'+ans.content" class="imgbox"></div>
                    <div slot="right-icon" class="item-right-icon">
						<u-icon v-if="sel.includes(ans.title)" :name="dtresult ? 'checkmark-circle-fill' : 'close-circle-fill'" :color="dtresult ? '#07c160' : '#fc1047'" />
                    </div>
                </u-cell>
            </u-cell-group>
        </div>
        <div class="result" :class="dtresult?'right':'wrong'">{{dtresult?'作答正确':'作答错误, 正确答案为 '+ ksdata.correct}}</div>
        <div class="analysis imgbox" v-html="'解析： ' + ksdata.answer"></div>
    </div>
</template>

<script>
    export default {
        props:{
            ksdata:{
                type: Object,
                default: ()=>{}
            },
            answerdata:{
                type: Object,
                default: ()=>{}
            },
        },
        data() {
            return {
                dtresult: false,    //表示是否答对    false：答错， true: 答对
                ansarr:[
                    {title:'A', content: this.imgzh(this.ksdata.item1)},
                    {title:'B', content: this.imgzh(this.ksdata.item2)},
                    {title:'C', content: this.imgzh(this.ksdata.item3)},
                    {title:'D', content: this.imgzh(this.ksdata.item4)}
                ],
                sel:[],
				zhdata: {}
            }
        },
        created(){
        	this.zhdata.article = this.imgzh(this.ksdata.article)
        	this.zhdata.qt = this.imgzh(this.ksdata.qt)
        },
        beforeMount(){
            this.ksdata.article = this.imgzh(this.ksdata.article)
            this.ksdata.qt = this.imgzh(this.ksdata.qt)
            this.sel = this.answerdata.an.split(',')
            if (this.answerdata.st == 1){
                this.dtresult = true
            } else {
                this.dtresult = false
            }
        },
        methods: {
            imgzh(str){ return str.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')},
        },
    }
</script>

<style scoped>
</style>
